<template>
    <div>
        <div class="sys-logo" @click="handleIndex">
            <div class="mini" v-if="isCollapse"></div>
            <div class="large" v-else>
                KOLA-SYS
            </div>
        </div>
        <div class="sys-menus">
            <el-menu :default-active=activeMenuItem class="el-menu-vertical-demo" @select="handleSelect"
                     background-color="#191a23"
                     text-color="#babbbd"
                     active-text-color="#ffffff"
                     :unique-opened="false"
                     :collapse="isCollapse">
                <el-menu-item :index="menuItem.path" v-for="(menuItem,index) in menuItems" :key="index"
                              v-if="!menuItem.child.length">
                    <i class="el-icon-menu" :class="menuItem.icon"></i>
                    <span slot="title">{{menuItem.name}}</span>
                </el-menu-item>
                <el-submenu :index="menuItem.path" v-for="(menuItem,index) in menuItems" :key="index"
                            v-if="menuItem.child.length">
                    <template slot="title">
                        <i class="el-icon-menu" :class="menuItem.icon"></i>
                        <span>{{menuItem.name}}</span>
                    </template>
                    <el-menu-item :index="menu.path" v-for="menu in menuItem.child" :key="menu.path">
                        <i class="el-icon-menu" :class="menu.icon"></i>{{menu.name}}
                    </el-menu-item>
                </el-submenu>
            </el-menu>
        </div>
    </div>
</template>

<script>
    /* eslint-disable */
    export default {
        name: "Aside",
        props: {
            isCollapse: {//控制菜单收缩展开
                type: Boolean,
                default: false
            },
            defaultActiveMenuItem: {//控制激活菜单项
                type: String,
                required: true
            }
        },
        data() {
            return {
                menuItemName: ""
            };
        },
        computed: {
            menuItems: function () {
                return this.$store.state.sysStore.menuItemData;
            },
            activeMenuItem: function () {
                return this.defaultActiveMenuItem;
            }
        },
        methods: {
            handleSelect(index, indexPath, $event) {
                this.menuItemName = $event.$el.innerText;
                this.$store.commit('pushTag', {name: this.menuItemName, type: '', path: index});
                this.$emit("isIndexTagFun", index);
            },
            //获取菜单信息
            getMenuInfos() {
                this.$httpGet(this.$axiosBaseHttp, "api/rest/menuInfo/list", {}).then(res => {
                    this.$store.commit("initMenus", res.data);
                });
            },
            //是否跳转到首页
            handleIndex() {
                this.$emit("isIndexTagFun", true);
            }
        }, mounted() {
            this.getMenuInfos();
        }
    }
</script>

<style scoped lang="scss">
    .el-menu-vertical-demo:not(.el-menu--collapse) {
        width: 25vh;
    }

    .sys-menus {
        overflow-y: scroll;
        height: calc(100vh - 60px);

        /deep/ .el-menu {
            border-right: solid 1px transparent;
        }

        .el-menu-item.is-active {
            background-color: #2d8cf0 !important;
        }
    }

    .sys-logo {
        width: auto;
        height: 60px;
        color: #3c4044;

        .mini {
            height: 60px;
            width: inherit;
            overflow: hidden;
            background: url('../../../assets/sys-logo.png') center center no-repeat;
            background-size: 60px;
        }

        .large {
            color: #babbbd;
            height: 60px;
            width: inherit;
            overflow: hidden;
            font-family: sans-serif;
            font-weight: 600;
            line-height: 60px;
            /*text-align: center;*/
            padding-left: 65px;
            background: url('../../../assets/sys-logo.png') 6% 50% no-repeat;
            background-size: 60px;
        }
    }

    /*修改滚动条样式--start*/
    .sys-menus::-webkit-scrollbar {
        width: 5px;
        height: 10px;
        display: none;
    }

    .sys-menus::-webkit-scrollbar-track {
        background: rgb(239, 239, 239);
        border-radius: 2px;
    }

    .sys-menus::-webkit-scrollbar-thumb {
        background: #bfbfbf;
        border-radius: 10px;
    }

    .sys-menus::-webkit-scrollbar-thumb:hover {
        background: rgba(39, 161, 255, 0.92);
    }

    .sys-menus::-webkit-scrollbar-corner {
        background: rgba(39, 161, 255, 0.92);
    }

    /*修改滚动条样式--end*/
</style>
